
<!DOCTYPE HTML>



<html>
	<head>
	<style>
		  body {background-color:lightgray}
		  h1   {color:blue}
		  .graph_block{border-style: solid; height: 150px;	}
		  #div_g{480px;}
		  div{ vertical-align:top;}
	</style>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<meta http-equiv="edit-Type" edit="text/html; charset=utf-8" />
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4rc2.js'></script>
		
			<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
			<script type="text/javascript" src="http://mediaelementjs.com/js/mejs-2.15.1/mediaelementplayer.min.css"></script>
			<script src="helper_functions.js"></script>
			
		<script type="text/javascript">
		    
			var graph_array = [];

var csv_string = "";
var csv_as_data = [];

var current_time = 0;
var graph_counter = 0;
var m_second_graph_counter = 0;
var m_roi_list_begin = [];
var m_roi_list_end = [];
var m_current_roi_index = 0;
var is_video_loaded = false;

function playSelectedFileInit(event) {
	var file = this.files[0];
	var type = file.type;
	var videoNode = document.querySelector('video');
	var canPlay = videoNode.canPlayType(type);
	
	
	
	canPlay = (canPlay === '' ? 'no' : canPlay);
	var isError = canPlay === 'no';
	//displayMessage(message, isError);

	if (isError) {
		return;
	}
	var fileURL = URL.createObjectURL(file);
	videoNode.src = fileURL;

	LoadVideoAndConnectToGraph(videoNode, graph_array);
}

function loadDataFile(e)
{
	if (e.target.files != undefined) {
			var reader = new FileReader();
			reader.onload = function (e) {				
				csv_as_data = ParseCsv(e.target.result);
				var status_element = document.querySelector('#current_status');
				status_element.innerHTML = "My new text!";
				for (var i = 0; i < csv_as_data.length; ++i) 
				{								
					graph_array[m_second_graph_counter] = CreateGraph(e.target.fileName, csv_as_data[i], document.getElementById("div_g"));
					m_second_graph_counter = m_second_graph_counter + 1;
				}
				status_element.innerHTML = "Done Loading data";

			};
			
			
			reader.readAsText(e.target.files.item(0));
			
			
		}
		return false;
}


function load_highlight(e)
{
	if (e.target.files != undefined) {
			var reader = new FileReader();
			reader.onload = function (e) {				
				csv_as_data = ParseROICsv(e.target.result);				
				for (var i = 0; i < csv_as_data.length; ++i) 
				{								
					temp = csv_as_data[i];
					addROICombo(temp[2],temp[0], temp[1]);				
				}
			};
			reader.readAsText(e.target.files.item(0));
		}
		return false;
}

//when the document is done loading, intialize the video events listeners
window.onload = function () {
	(function localFileVideoPlayerInit233(win) {
		var URL = win.URL || win.webkitURL,
		inputNode = document.querySelector('#video_file_selector');
		inputNode.addEventListener('change', playSelectedFileInit, false);
	}(window));
	$("#filename").change(loadDataFile);
	$("#roi_file_selector").change(load_highlight);
};

function LoadVideoAndConnectToGraph(video_html_object, _graph_array) {

	video_html_object.onseeking = function () {
		console.log('seeking');
		current_time = video_html_object.currentTime;

	};

	video_html_object.oncanplay = function () {
		console.log('can play');
		is_video_loaded = true;
	};

	video_html_object.addEventListener('timeupdate', update_by_time_event, false);
};


function update_by_time_event(event)
{
	event=event||window.event;
	video_html_object = (event.target||event.srcElement);
	var t = document.getElementById('time');
	t.innerHTML = video_html_object.currentTime;
	current_time = video_html_object.currentTime;

	for (var i = 0; i < graph_array.length; ++i) {
		graph_array[i].updateOptions({
			isZoomedIgnoreProgrammaticZoom : false,
			dateWindow : GetCurrentVideoTime(),	
			showRangeSelector: true		
		});
	}
}


function GetCurrentVideoTime()
{
	var videoNode = document.querySelector('video');
	return   [videoNode.currentTime - 5, videoNode.currentTime + 5];
}

function change_movie_position(e, x, points) {
	console.log('change position');
	var videoNode = document.querySelector('video');

	videoNode.currentTime = x;
}

function draw_marker(my_graph2, my_area, canvas) {	
	if (is_video_loaded == true) {
		canvas.fillStyle = "rgba(255, 0, 0, 0.5)";
		var left = my_graph2.toDomCoords(current_time - 0.1, 0)[0] - 0.1;
		var right = my_graph2.toDomCoords(current_time + 0.1, 0)[0] + 0.1;
		canvas.fillRect(left, my_area.y, right - left, my_area.h);
		console.log("0000   " + m_roi_list_begin);
		for(i = 0; i < m_roi_list_begin.length; ++i)
		{
			canvas.fillStyle = "rgba(0, 120, 0, 0.5)";
			console.log("----+++   " + m_roi_list_begin[i] + " " + m_roi_list_end[i]);
			var left = my_graph2.toDomCoords(m_roi_list_begin[i] , 0)[0] ;
			var right = my_graph2.toDomCoords(m_roi_list_end[i] , 0)[0] ;
			canvas.fillRect(left, my_area.y, right - left, my_area.h);
		}

	}
};

//data creation
function CreateGraph(title, _csv_as_data, div_parent) {


	console.log('start building graph');

	var div_element = document.createElement('div');

	div_element.id = 'block';
	div_element.id = div_element.id.concat(graph_counter);
	console.log(div_element.id);
	graph_counter = graph_counter + 1;
	div_element.className = 'graph_block';
	div_parent.appendChild(div_element);
	
	var single_graph = new Dygraph(
			div_element,
			_csv_as_data, {
			labels : ['time', 'val.'],
			animatedZooms : true,
			title: title	
			//,valueRange: [-3, 3]

		});
	single_graph.updateOptions({
		clickCallback : change_movie_position,
		underlayCallback : function (canvas, area, g2) {
			draw_marker(g2, area, canvas);
		},
		stepPlot: false
	}, true);
	return single_graph;
}

//for future use			
function exportToCsv() {
	var myCsv = "Col1,Col2,Col3\nval1,val2,val3";
	window.open('data:text/csv;charset=utf-8,' + escape(myCsv));
}

function addROICombo(name, begin_time, end_time)
{
	var option = document.createElement("option");
    option.text = name;
    option.value = begin_time;
	m_roi_list_begin.push(begin_time);		
	m_roi_list_end.push(end_time);		
	document.getElementById("combo").add(option, null);	
}


function addCombo() {
    var textb = document.getElementById("txtCombo");
    var combo = document.getElementById("combo");
    
	
    var option = document.createElement("option");
    option.text = "ssss";
	
    option.value = textb.value;
    try {
        combo.add(option, null); //Standard 
    }catch(error) {
        combo.add(option); // IE only
    }
    textb.value = "";
}

function jump_to_ROI(roi_index)
{
	m_current_roi_index = roi_index;
	var videoNode = document.querySelector('video');	
	videoNode.currentTime = m_roi_list_begin[m_current_roi_index];		
}

function move_next()
{
	m_current_roi_index++;
	if(m_current_roi_index  >=  m_roi_list_begin.length)
	{
		m_current_roi_index = 0;
	}	
	jump_to_ROI(m_current_roi_index);	
	document.getElementById("combo").selectedIndex = m_current_roi_index;		
}

function move_back()
{
	m_current_roi_index--;
	if(m_current_roi_index  <  0)
	{
		m_current_roi_index = m_roi_list_begin.length-1;
	}	
	jump_to_ROI(m_current_roi_index);	
	document.getElementById("combo").selectedIndex = m_current_roi_index;		
}			
			
			
		</script>
	</head>
	<body>
    <div style="width: 100%; display: table;">
      <div style="display: table-row">
        <div style="width: 600px; display: table-cell;">
          <video width="640" height="480" controls="">
          <source src="" type="video/mp4" />Your browser does not support the video tag.</video>
          <div id="time"></div>
		  <div id="ROI">
		  
		  <fieldset>
			<legend>Roi</legend>
			
			
			<br>
			<select name="combo" id="combo" onchange='jump_to_ROI(this.selectedIndex)' onClick="jump_to_ROI(this.selectedIndex)"></select>
			<button onclick="move_back()" >back</button><button onclick="move_next()" >next</button>
		</fieldset>
		  </div>
          <div id="csvimporthint"></div>
          <div id="current_status" style="border-color: red; border-style: solid;"></div>
		  <fieldset>
			<legend>instruction</legend>
			  <div id="instruction" style="border-color: blue; border-style: solid;">
			  <fieldset>
				<legend>1. Load the data file and wait to see the chart on the right side of the screen</legend>
				
					<input type="file" name="filename" id="filename"  />
				</fieldset>
				<fieldset>
					<legend>2. Load the video file</legend>			
					<input type="file" id="video_file_selector" accept="video/*" />
				</fieldset>
				<fieldset>
					<legend>3. Load ROI file</legend>						
					<input type="file" id="roi_file_selector"  />
				</fieldset>
				<p>3. Press play</p>
			  </div>
		  </fieldset>
        </div>
        <div style="display: table-cell;">
          <div id="div_g" style="width:600px; height:300px;"></div>
        </div>
      </div>
    </div>
  </body>
</html>
